<template>
    <div class="box">
        <div class="tableBox" v-if="tableData.length > 0">
            <el-table :data="tableData" :border="true" style="width: 100%" size="small"
                :row-style="(param) => { return isSelect ? tableRowStyle(param) : '' }">
                <template v-for="(item, index) in tableProps">
                    <el-table-column :key="index" header-align="center" align="center" :prop="item.prop"
                        :label="item.label">
                    </el-table-column>
                </template>
            </el-table>
        </div>
        <div class="emptyBox" v-else>
            <el-empty description="暂无数据"></el-empty>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
            default: () => {
                return []
            }
        },
        tableProps: {
            type: Array,
            default: () => {
                return []
            }
        },
        isSelect: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    },
    data() {
        return {

        }
    },
    methods: {
        tableRowStyle({ row }) {
            if (row.isNeed)
                return { 'background-color': '#f7bf1e', 'color': '#e23e31' }
        }
    }

}
</script>

<style lang="scss" scoped>
.box {
    .tableBox {
        padding: 0 30px;
    }
}
</style>